<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Icon - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Icon - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-item>
            <ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
            <ion-label>
              <code> name="home" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon name="home" slot="start"></ion-icon>
            <ion-label>
              <code> name="home" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
            <ion-label>
              <code> id="dynamicHomeIcon" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon name="STAR" slot="end"></ion-icon>
            <ion-label>
              <code> name="STAR" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon icon="home" color="primary" slot="start"></ion-icon>
            <ion-label>
              <code> icon="home" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
            <ion-label>
              <code> name="logo-twitter" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
            <ion-label>
              <code> ios="logo-apple" md="logo-android" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon name="color-filter" slot="start"></ion-icon>
            <ion-label>
              <code> name="color-filter" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon slot="start"></ion-icon>
            <ion-label>
              <code> name="null" </code>
            </ion-label>
          </ion-item>

          <ion-item>
            <ion-icon slot="start" ios="star-outline" md="star"></ion-icon>
            <ion-label>
              <p>ios: star outline</p>
              <p>md: star</p>
            </ion-label>
          </ion-item>
          <ion-item>
            <ion-icon slot="start" mode="ios" ios="star-outline" md="star"></ion-icon>
            <ion-label>
              <h3>mode: ios</h3>
              <p>ios: star outline</p>
              <p>md: star</p>
            </ion-label>
          </ion-item>
          <ion-item>
            <ion-icon slot="start" mode="md" ios="star-outline" md="star"></ion-icon>
            <ion-label>
              <h3>mode: md</h3>
              <p>ios: star outline</p>
              <p>md: star</p>
            </ion-label>
          </ion-item>

          <ion-item detail="true">
            <ion-label>
              <code> ion-item w/ [detail="true"] attr. text text text text text text </code>
            </ion-label>
          </ion-item>
        </ion-list>

        <p>
          <ion-button onclick="updateIcon()">
            <ion-icon slot="start" id="dynamicBtnIcon"></ion-icon>
            Update icon
          </ion-button>
        </p>
      </ion-content>

      <style>
        /* to ensure ng css encapsulation doesn't mess with icon attributes */

        code {
          font-size: 0.8em;
        }
      </style>
    </ion-app>

    <script>
      var dynamicColor = document.getElementById('dynamicColor');
      dynamicColor.color = 'danger';

      var dynamicHomeIcon = document.getElementById('dynamicHomeIcon');
      dynamicHomeIcon.name = 'home';
      dynamicHomeIcon.isActive = false;

      icons = ['home', 'star', 'ios-alert', 'ios-alert-outline', 'md-alert', 'logo-apple'];

      var iconIndex = 0;

      var dynamicBtnIcon = document.getElementById('dynamicBtnIcon');
      dynamicBtnIcon.name = icons[0];

      function updateIcon() {
        iconIndex++;
        if (iconIndex >= icons.length) {
          iconIndex = 0;
        }
        dynamicBtnIcon.name = icons[iconIndex];
      }
    </script>
  </body>
</html>
